<template>
    <view class="wrap">
        <!-- 设备区域容器，包含所有设备卡片 -->
        <view class="dev-area">
            <!-- 温度设备卡片，点击时跳转到折线图页面 -->
            <view class="dev-cart" @click="goLineChart">
                <view class="">
                    <!-- 设备名称 -->
                    <view class="dev-name">温度</view>
                    <!-- 设备图标 -->
                    <image class="dev-logo" src="../../static/temp.png" mode=""></image>
                </view>
                <!-- 显示温度数据 -->
                <view class="dev-data">{{temp}} ℃</view>
            </view>

            <!-- 湿度设备卡片，点击时跳转到折线图页面 -->
            <view class="dev-cart" @click="goLineChart">
                <view class="">
                    <!-- 设备名称 -->
                    <view class="dev-name">湿度</view>
                    <!-- 设备图标 -->
                    <image class="dev-logo" src="../../static/humi.png" mode=""></image>
                </view>
                <!-- 显示湿度数据 -->
                <view class="dev-data">{{humi}} %</view>
            </view>

            <!-- 台灯设备卡片，包含一个开关来控制台灯状态 -->
            <view class="dev-cart">
                <view class="">
                    <!-- 设备名称 -->
                    <view class="dev-name">台灯</view>
                    <!-- 设备图标 -->
                    <image class="dev-logo" src="../../static/lamp.png" mode=""></image>
                </view>
                <!-- 台灯开关组件 -->
                <switch :checked="led" @change="onLedSwitch" color="#2b9939"/>
            </view>
			
			<!-- 额外服务卡片 -->
			<view class="dev-cart">
				<view>
					<!-- 额外服务信息 -->
					额~外服务：答疑和技术支持（面向学习）V：yizhibanjieup
				</view>
			</view>
			
        </view>
    </view>
</template>


<script>
    // 引入创建令牌的函数
    const { createCommonToken } = require('@/key.js')
	
	const my_product_id = "" //填自己产品号
	const my_device_name = ""	//填自己设备号
	
    export default {
        data() {
            return {
                // 温度数据
                temp: '',
                // 湿度数据
                humi: '',
                // 台灯状态
                led: true,
                // 认证令牌
                token: '',
            }
        },
        onLoad() {
            // 页面加载时生成认证令牌
            const params = {
				// 填自己用户秘钥
                author_key: '',
				// 版本号不用改
                version: '2022-05-01',
				// 填自己用户id
                user_id: '',
            }
            this.token = createCommonToken(params);
        },
        onShow() {
            // 页面显示时，首次和定时获取设备数据
            this.fetchDevData();
            setInterval(()=>{
                this.fetchDevData();
            }, 3000) // 每3秒刷新一次数据
        },
        methods: {
            // 获取设备数据的方法
            fetchDevData() {
                uni.request({
                    url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', // 示例接口地址
                    method: 'GET',
                    data: {
                        product_id: my_product_id,
                        device_name: my_device_name
                    },
                    header: {
                        'authorization': this.token // 使用认证令牌
                    },
                    success: (res) => {
                        // 更新温度、湿度和台灯状态数据
                        console.log(res.data);
                        this.temp = res.data.data[2].value;
                        this.humi = res.data.data[0].value;
                        this.led = res.data.data[1].value === 'true';
                    }
                });
            },
            // 台灯状态改变时的处理方法
            onLedSwitch(event) {
                console.log(event.detail.value);
                let value = event.detail.value;
                uni.request({
                    url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', // 示例接口地址
                    method: 'POST',
                    data: {
                        product_id: my_product_id,
                        device_name: my_device_name,
                        params: {
                            "led": value
                        }
                    },
                    header: {
                        'authorization': this.token // 使用认证令牌
                    },
                    success: () => {
                        console.log('LED ' + (value ? 'ON' : 'OFF') + ' !');
                    }
                });
            },
            // 跳转到折线图页面的方法
            goLineChart() {
                // 将认证令牌存储在本地，供其他页面使用
                uni.setStorageSync('token', this.token);
                // 页面跳转
                uni.navigateTo({
                    url:`../LineChart/LineChart`
                });
            },
        }
    }
</script>


<style>
    .wrap {
        padding: 30rpx;
    }

    .dev-area {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .dev-cart {
        height: 150rpx;
        width: 320rpx;
        border-radius: 30rpx;
        margin-top: 30rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 0 15rpx #ccc;
    }

    .dev-name, .dev-data {
        font-size: 20rpx;
        text-align: center;
        color: #6d6d6d;
    }

    .dev-logo {
        width: 70rpx;
        height: 70rpx;
        margin-top: 10rpx;
    }

    .dev-data {
        font-size: 50rpx;
    }
</style>
